<template>
<div class="bg">
  <div class="header">
    <h1>首页</h1>
    <div class="showTime">当前时间: 无 </div>

  </div>
  <div class="no">
    <div class="no-hd">
      <ul>
        <li>{{driverNum}}</li>
        <li>{{auditorNum}}</li>
        <li>{{applyNum}}</li>
        <li>{{passNum}}</li>
      </ul>
    </div>
    <div class="no-bd">
      <ul>
        <li>注册司机人数</li>
        <li>审核员人数</li>
        <li>历史路线申报数</li>
        <li>历史申报通过数</li>
      </ul>
    </div>
  </div>
  <div class="main">

    <div class="column">
      <div class="panel">
        历月申报统计量
        <HistogramChart></HistogramChart>
        <div class="panel-footer"></div>
      </div>

    </div>
    <div class="column">

      <div class="map">
        <div class="map1"></div>
        <div class="map2"></div>
        <div class="map3"></div>
        <HunanMap></HunanMap>
      </div>
    </div>
    <div class="column">
      <div class="panel">
        近期热门申报路线
        <PieChart></PieChart>
        <div class="panel-footer"></div>
      </div>

    </div>
  </div>


</div>
</template>

<script>
import PieChart from './pieChart.vue'
import HistogramChart from './histogramChart.vue'
import $ from "jquery"
import "../../../assets/china"
import * as echarts from "echarts";
import axios from "axios";
import HunanMap from "@/router/administrator/masterPersonal/hunanMap";
export default {
  name: "dataScreen",
  components:{
    HunanMap,
    PieChart,
    HistogramChart,
  },
  unmounted() {
    clearTimeout(this.t);//清除定时器
  },
  mounted() {
    this.t = setTimeout(this.time, 1000);//開始运行
    this.mapInit();

    axios({
      method: 'post',
      url: '/api/login/getUserNum',
      data: {
        userType: '司机',
      },

    })
        .then((res)=>{
          this.driverNum=res.data.data.userNum
        });
    axios({
      method: 'post',
      url: '/api/login/getUserNum',
      data: {
        userType: '审核员',
      },

    })
        .then((res)=>{
          this.auditorNum=res.data.data.userNum
        });
    axios({
      method: 'get',
      url: '/api/road_apply_logs/getNum',
    })
        .then((res)=>{
          this.applyNum=res.data.data
        });

    axios({
      method: 'get',
      url: '/api/road_apply_logs/getPassNum',

    })
        .then((res)=>{
          this.passNum=res.data.data
        });
  },
  data(){
    return{
      t : null,
      driverNum:0,
      auditorNum:0,
      applyNum:0,
      passNum:0,
    }
  },
  methods:{
    time() {
      clearTimeout(this.t);//清除定时器
      var dt = new Date();
      var y = dt.getFullYear();
      var mt = dt.getMonth() + 1;
      var day = dt.getDate();
      var h = dt.getHours();//获取时
      var m = dt.getMinutes();//获取分
      var s = dt.getSeconds();//获取秒
      document.querySelector(".showTime").innerHTML = '当前时间：' + y + "年" + mt + "月" + day + "日  " + h + "时" + m + "分" + s + "秒";
      this.t = setTimeout(this.time, 1000); //设定定时器，循环运行
    },
      // 地图模块
      mapInit() {
      console.log(1)
        //以下为echartsmap相关代码
        $.get('hunan.json', function (湖南省) {//我的geojson文件是放在public下的
          echarts.registerMap('湖南省', 湖南省);
          var chart = echarts.init(document.querySelector(".map .chart"));
          chart.setOption({
            //设置地图样式
            geo: {
              map: "湖南省",
              zoom: 1.2,
              label: {
                // 通常状态下的样式
                normal: {
                  show: true,
                  textStyle: {
                    color: "#fff",
                  },
                },
                // 鼠标放上去的样式
                emphasis: {
                  textStyle: {
                    color: "#00f",
                  },
                },
              },
              // 地图区域的样式设置
              itemStyle: {
                normal: {
                  borderColor: "rgba(147, 235, 248, 1)",
                  borderWidth: 1,
                  areaColor: {
                    type: "radial",
                    x: 0.5,
                    y: 0.5,
                    r: 0.8,
                    colorStops: [
                      {
                        offset: 0,
                        color: "rgba(147, 235, 248, 0)", // 0% 处的颜色
                      },
                      {
                        offset: 1,
                        color: "rgba(147, 235, 248, .2)", // 100% 处的颜色
                      },
                    ],
                    globalCoord: false, // 缺省为 false
                  },
                  shadowColor: "rgba(128, 217, 248, 1)",
                  shadowOffsetX: -2,
                  shadowOffsetY: 2,
                  shadowBlur: 10,
                },
                // 鼠标放上去高亮的样式
                emphasis: {
                  areaColor: "#389BB7",
                  borderWidth: 0,
                },
              },
            }

          });
        });


      },
  }

}
</script>

<style scoped>
ul{
  list-style: none;
  padding: 0;
}
.bg{
  height: 100%;
  width: 100%;
  background: url("/src/assets/dataScreenBg.jpg");

}
.header{
  height: 50px;
  width: 100%;


  color: white;
  background: url("/src/assets/head_bg.png");
}
.header h1{
  height: 50px;
  line-height: 50px;
  margin: 0;
  font-size: 20px;
}
.header .showTime {
  position: absolute;
  top: 0;
  left: 10px;

  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
}
.panel {
  position: absolute;
  height: 300px;
  width: 380px;
  color: white;
  font-size: 20px;
  border: 1px solid rgba(25, 186, 139, 0.17);
  background: url("/src/assets/line(1).png");
  padding: 0 10px 10px;
  margin-bottom: 10px;
  bottom: 0px;
}
.panel::before {
   position: absolute;
   top: 0;
   left: 0;
   content: "";
   width: 10px;
   height: 10px;
   border-top: 2px solid #02a6b5;
   border-left: 2px solid #02a6b5;
 }
.panel::after {
   position: absolute;
   top: 0;
   right: 0;
   content: "";
   width: 10px;
   height: 10px;
   border-top: 2px solid #02a6b5;
   border-right: 2px solid #02a6b5;
 }
.panel-footer {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
}
.panel-footer::before {
   position: absolute;
   bottom: 0;
   left: 0;
   content: "";
   width: 10px;
   height: 10px;
   border-bottom: 2px solid #02a6b5;
   border-left: 2px solid #02a6b5;
 }
.panel-footer::after {
   position: absolute;
   bottom: 0;
   right: 0;
   content: "";
   width: 10px;
   height: 10px;
   border-bottom: 2px solid #02a6b5;
   border-right: 2px solid #02a6b5;
 }
.main {
  min-width: 1024px;
  max-width: 1920px;
  padding: 10px 10px 0;
  display: flex;
}
.main .column {
  flex: 3;
}
.main .column:nth-child(2) {
  flex: 3;
  margin: 0 10px 14px;
  overflow: hidden;
}
.no {
  background: rgba(101, 132, 226, 0.1);
  padding: 10px;
}
.no .no-hd {
  position: relative;
  border: 1px solid rgba(25, 186, 139, 0.17);
}
.no .no-hd::before {
  content: "";
  position: absolute;
  width: 30px;
  height: 10px;
  border-top: 2px solid #02a6b5;
  border-left: 2px solid #02a6b5;
  top: 0;
  left: 0;
}
.no .no-hd::after {
  content: "";
  position: absolute;
  width: 30px;
  height: 10px;
  border-bottom: 2px solid #02a6b5;
  border-right: 2px solid #02a6b5;
  right: 0;
  bottom: 0;
}
.no .no-hd ul {
  display: flex;

}
.no .no-hd ul li {
  position: relative;
  flex: 1;
  text-align: center;
  height: 40px;
  line-height: 40px;
  font-size: 40px;
  color: #ffeb7b;
  padding: 5px 0;

  font-weight: bold;
}
.no .no-hd ul li:first-child::after {
  content: "";
  position: absolute;
  height: 50%;
  width: 1px;
  background: rgba(255, 255, 255, 0.2);
  right: 0;
  top: 25%;
}
.no .no-bd ul {
  display: flex;
}
.no .no-bd ul li {
  flex: 1;
  height: 20px;
  line-height: 20px;
  text-align: center;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.7);
  padding-top: 5px;
}
.map {
  position: relative;
  height: 400px;
}
.map .map1 {
  width: 350px;
  height: 350px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: url("../../../assets/map.png");
  background-size: 100% 100%;
  opacity: 0.3;
}
.map .map2 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 370px;
  height: 370px;
  background: url("../../../assets/lbx.png");
  animation: rotate1 15s linear infinite;
  opacity: 0.6;
  background-size: 100% 100%;
}
.map .map3 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 375px;
  height: 375px;
  background: url("../../../assets/img.png");
  animation: rotate2 10s linear infinite;
  opacity: 0.6;
  background-size: 100% 100%;
}
@keyframes rotate1 {
  form {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
@keyframes rotate2 {
  form {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}
.map .chart {
  position: center;

  width: 100%;
  height: 400px;
}
</style>